<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                >
    <f:view contentType="text/html">
        <h:form>
        <h:panelGrid columns="1" width="100%" >
            <p:panel style="width: 100%">
                <f:facet name="header">
                    <h:outputText value="Device Master"/>
                </f:facet>
                
                <h:panelGrid columns="12">
                    <h:outputText value="Device Name :" style="font-weight: bold"></h:outputText>
                    <h:inputText/>
                    <p:spacer width="30"/>
                    
                    <h:outputText value="Device Type :" style="font-weight: bold"></h:outputText>
                    <h:selectOneMenu>
                        <f:selectItem itemValue="Mobile"/>
                    </h:selectOneMenu>    
                    <p:spacer width="30"/>
                    
                    <h:outputText value="Device Identity :" style="font-weight: bold"></h:outputText>
                    <h:inputText/>
                    <p:spacer width="30"/>
                    
                    <h:outputText value="IP Address :" style="font-weight: bold"></h:outputText>
                    <h:inputText/>
                    <p:spacer width="30"/>

                    <h:outputText value="Description :" style="font-weight: bold"></h:outputText>
                    <h:inputTextarea/>
                    <p:spacer width="30"/>
                    
                </h:panelGrid>
                <p:separator />                
                <h:panelGrid style="text-align: center;width: 100%" columns="2">
                    <p:panel style="border-style: none">
                        <p:button value="Add"/>
                        <p:spacer width="20"/>
                        <p:button value="Search"/>
                        <p:spacer width="20"/>
                        <p:button value="Clear"/>                        
                    </p:panel>                    
                </h:panelGrid>                                                    
            </p:panel>
        </h:panelGrid>
        
       <p:dataTable  var="mps" value="mps" paginator="true" rows="10" id="mpsDetailTable" 
                     selectionMode="single" paginatorPosition="bottom"
                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}{RowsPerPageDropdown}"  
                     rowsPerPageTemplate="5,10,15" style="font-size: 12px">
                <f:facet name="header">
                    View Device Details
                </f:facet>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="S.No" />
                    </f:facet>
                    <h:outputText value="#{car.model}" />
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Device Name" />
                    </f:facet>
                    <h:outputText value="#{car.year}" />
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Identity" />
                    </f:facet>
                    <h:outputText value="#{car.manufacturer}" />
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Type" />
                    </f:facet>
                    <h:outputText value="#{car.manufacturer}" />
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="IP Address" />
                    </f:facet>
                    <h:outputText value="#{car.manufacturer}" />
                </p:column>           
           
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Description" />
                    </f:facet>
                    <h:outputText value="#{car.manufacturer}" />
                </p:column>           
           
           
                <p:column selectionMode="multiple" headerText="Select"/>
        </p:dataTable>            

        <p:toolbar>
            <p:toolbarGroup align="right">  
                <p:commandButton type="push" title="Edit" image="ui-icon-file" value="Edit"/>               
                <p:commandButton type="push" title="Delete" image="ui-icon-trash" value="Delete"/>           
                <p:commandButton type="push" title="Print" image="ui-icon-print" value="Print"/>               
                <p:commandButton type="push" title="Download" image="ui-icon-file" value="Download"/>               
            </p:toolbarGroup>
        </p:toolbar>
        
        <!--
        <h:panelGrid style="text-align: center;width: 100%" columns="2">
            <p:panel style="border-style: none">
                <p:button value="Download"/>
                <p:spacer width="20"/>
                <p:button value="Edit"/>
                <p:spacer width="20"/>
                <p:button value="Delete"/>                        
            </p:panel>
        </h:panelGrid>                                                            
        -->
        </h:form>
    </f:view>
</ui:composition>